<template>
    <el-container style="height: 100%;">
      <!-- 侧边栏 -->
      <el-aside width="250px" class="sidebar">
        <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" @select="handleSelect">
          <el-menu-item index="/">首页</el-menu-item>
          <el-menu-item index="/residents">居民信息</el-menu-item>
          <el-menu-item index="/houses">房屋信息</el-menu-item>
          <el-menu-item index="/properties">物业管理</el-menu-item>
          <el-menu-item index="/complaints">投诉建议</el-menu-item>
          <el-menu-item index="/activities">社区活动</el-menu-item>
          <el-menu-item index="/system">系统管理</el-menu-item>
        </el-menu>
      </el-aside>
  
      <!-- 主体内容区域 -->
      <el-main>
        <el-row class="content" justify="center" style="margin-top: 20px;">
          <el-col :span="18">
            <el-card>
              <div class="header">
                <h3>系统管理</h3>
                <el-button type="primary" @click="openAddUserDialog">添加用户</el-button>
              </div>
  
              <el-tabs v-model="activeTab" type="card">
                <el-tab-pane label="用户管理" name="user">
                  <el-table :data="users" stripe>
                    <el-table-column prop="id" label="ID" width="80"></el-table-column>
                    <el-table-column prop="username" label="用户名" width="180"></el-table-column>
                    <el-table-column prop="role" label="角色" width="120"></el-table-column>
                    <el-table-column label="操作">
                      <template #default="scope">
                        <el-button type="text" @click="openEditUserDialog(scope.row)">编辑</el-button>
                        <el-button type="text" @click="deleteUser(scope.row.id)">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-tab-pane>
  
                <el-tab-pane label="权限管理" name="permissions">
                  <el-table :data="permissions" stripe>
                    <el-table-column prop="id" label="ID" width="80"></el-table-column>
                    <el-table-column prop="name" label="权限名称" width="180"></el-table-column>
                    <el-table-column label="操作">
                      <template #default="scope">
                        <el-button type="text" @click="editPermission(scope.row)">编辑</el-button>
                        <el-button type="text" @click="deletePermission(scope.row.id)">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-tab-pane>
              </el-tabs>
  
              <!-- 添加用户弹窗 -->
              <el-dialog title="添加用户" :visible.sync="addUserDialogVisible">
                <el-form :model="newUser" ref="addUserForm">
                  <el-form-item label="用户名" :label-width="'100px'">
                    <el-input v-model="newUser.username" placeholder="请输入用户名"></el-input>
                  </el-form-item>
                  <el-form-item label="密码" :label-width="'100px'">
                    <el-input v-model="newUser.password" placeholder="请输入密码" type="password"></el-input>
                  </el-form-item>
                  <el-form-item label="角色" :label-width="'100px'">
                    <el-select v-model="newUser.role" placeholder="请选择角色">
                      <el-option label="管理员" value="admin"></el-option>
                      <el-option label="普通用户" value="user"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
  
                <div slot="footer" class="dialog-footer">
                  <el-button @click="addUserDialogVisible = false">取消</el-button>
                  <el-button type="primary" @click="submitAddUser">确认</el-button>
                </div>
              </el-dialog>
  
              <!-- 编辑用户弹窗 -->
              <el-dialog title="编辑用户" :visible.sync="editUserDialogVisible">
                <el-form :model="currentUser" ref="editUserForm">
                  <el-form-item label="用户名" :label-width="'100px'">
                    <el-input v-model="currentUser.username" placeholder="请输入用户名"></el-input>
                  </el-form-item>
                  <el-form-item label="密码" :label-width="'100px'">
                    <el-input v-model="currentUser.password" placeholder="请输入密码" type="password"></el-input>
                  </el-form-item>
                  <el-form-item label="角色" :label-width="'100px'">
                    <el-select v-model="currentUser.role" placeholder="请选择角色">
                      <el-option label="管理员" value="admin"></el-option>
                      <el-option label="普通用户" value="user"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
  
                <div slot="footer" class="dialog-footer">
                  <el-button @click="editUserDialogVisible = false">取消</el-button>
                  <el-button type="primary" @click="submitEditUser">确认</el-button>
                </div>
              </el-dialog>
  
              <!-- 权限编辑弹窗 -->
              <el-dialog title="编辑权限" :visible.sync="editPermissionDialogVisible">
                <el-form :model="currentPermission" ref="editPermissionForm">
                  <el-form-item label="权限名称" :label-width="'100px'">
                    <el-input v-model="currentPermission.name" placeholder="请输入权限名称"></el-input>
                  </el-form-item>
                </el-form>
  
                <div slot="footer" class="dialog-footer">
                  <el-button @click="editPermissionDialogVisible = false">取消</el-button>
                  <el-button type="primary" @click="submitEditPermission">确认</el-button>
                </div>
              </el-dialog>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import { ElContainer, ElAside, ElMenu, ElMenuItem, ElMain, ElRow, ElCol, ElButton, ElCard, ElTable, ElTableColumn, ElDialog, ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElTabs, ElTabPane } from 'element-plus';
  import { getUsers, addUser, updateUser, deleteUser as del, getPermissions, updatePermission, deletePermission as delPermission } from '@/utils/axios';
  
  const activeMenu = ref('/system');
  const activeTab = ref('user');
  const users = ref([]);
  const permissions = ref([]);
  const addUserDialogVisible = ref(false);
  const editUserDialogVisible = ref(false);
  const editPermissionDialogVisible = ref(false);
  const newUser = ref({
    username: '',
    password: '',
    role: ''
  });
  const currentUser = ref({
    id: null,
    username: '',
    password: '',
    role: ''
  });
  const currentPermission = ref({
    id: null,
    name: ''
  });
  
  // 获取用户数据
  const loadUsers = async () => {
    const response = await getUsers();
    users.value = response;
  };
  
  // 获取权限数据
  const loadPermissions = async () => {
    const response = await getPermissions();
    permissions.value = response;
  };
  
  // 打开添加用户弹窗
  const openAddUserDialog = () => {
    newUser.value = {
      username: '',
      password: '',
      role: ''
    };
    addUserDialogVisible.value = true;
  };
  
  // 提交添加用户
  const submitAddUser = async () => {
    await addUser(newUser.value);
    addUserDialogVisible.value = false;
    loadUsers();
  };
  
  // 打开编辑用户弹窗
  const openEditUserDialog = (user) => {
    currentUser.value = { ...user };
    editUserDialogVisible.value = true;
  };
  
  // 提交编辑用户
  const submitEditUser = async () => {
    await updateUser(currentUser.value.id, currentUser.value);
    editUserDialogVisible.value = false;
    loadUsers();
  };
  
  // 删除用户
  const deleteUser = async (id) => {
    await del(id);
    loadUsers();
  };
  
  // 打开编辑权限弹窗
  const editPermission = (permission) => {
    currentPermission.value = { ...permission };
    editPermissionDialogVisible.value = true;
  };
  
  // 提交编辑权限
  const submitEditPermission = async () => {
    await updatePermission(currentPermission.value.id, currentPermission.value);
    editPermissionDialogVisible.value = false;
    loadPermissions();
  };
  
  // 删除权限
  const deletePermission = async (id) => {
    await delPermission(id);
    loadPermissions();
  };
  
  onMounted(() => {
    loadUsers();
    loadPermissions();
  });
  </script>
  
  <style scoped>
  .content {
    padding: 20px;
  }
  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .el-button {
    margin-left: 10px;
  }
  
  .el-dialog {
    width: 400px;
  }
  
  .el-form-item {
    margin-bottom: 15px;
  }
  </style>
  